<template>
	<div :class="['sw_ad_block', 'swiper', 'swiper-no-swiping', adTypeClass]" v-if="isShow"></div>
</template>

<script>
export default {
	name: 'swAdBlock',
	data() {
		const effectConfig = { grabCursor: true, effect: 'creative' };
		return {
			adData: [],
			isShow: false,
			listQuery: { page: 1, limit: 5, status: '1' },
			effectOptArr: [
				{
					...effectConfig,
					creativeEffect: {
						prev: { shadow: true, translate: [0, 0, -400] },
						next: { translate: ['100%', 0, 0] }
					}
				},
				{
					...effectConfig,
					creativeEffect: {
						prev: { shadow: true, translate: ['-120%', 0, -500] },
						next: { shadow: true, translate: ['120%', 0, -500] }
					}
				},
				{
					...effectConfig,
					creativeEffect: {
						prev: { shadow: true, translate: ['-20%', 0, -1] },
						next: { translate: ['100%', 0, 0] }
					}
				},
				{
					...effectConfig,
					creativeEffect: {
						prev: { shadow: true, origin: 'left center', translate: ['-5%', 0, -200], rotate: [0, 100, 0] },
						next: { origin: 'right center', translate: ['5%', 0, -200], rotate: [0, -100, 0] }
					}
				}
			]
		};
	},
	computed: {
		adTypeClass() {
			if (this.type === 'rightBottom') {
				return 'right_bottom_ad';
			} else if (this.type === 'banner') {
				return 'banner_ad_show';
			} else {
				return '';
			}
		},
		isClose() {
			return this.type !== 'banner';
		}
	}
};
</script>

<style lang="scss" scoped>
.sw_ad_block {
}
</style>
